<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Select with Placeholder Restore</title>
  <style>
    .custom-select {
      position: relative;
      width: 240px;
      font-family: sans-serif;
    }

    .custom-select input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 30px 8px 8px;
      font-size: 14px;
    }

    .icon-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 14px;
      color: #999;
      cursor: pointer;
      user-select: none;
      display: none;
    }

    .icon-btn.show {
      display: block;
    }

    .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      border: 1px solid #ccc;
      background: #fff;
      max-height: 200px;
      overflow-y: auto;
      display: none;
      z-index: 10;
    }

    .dropdown.visible {
      display: block;
    }

    .dropdown div {
      padding: 8px;
      cursor: pointer;
    }

    .dropdown div:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

<div class="custom-select" id="customSelect">
  <input type="text" id="selectInput" placeholder="Select" readonly />
  <span class="icon-btn" id="arrowBtn">›</span>
  <span class="icon-btn" id="clearBtn">×</span>
  <div class="dropdown" id="dropdown"></div>
</div>

<script>
  const options = [
    { label: "Option A", value: "a" },
    { label: "中国", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "美国", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
    { label: "Another", value: "x" }
  ];

  const select = document.getElementById("customSelect");
  const input = document.getElementById("selectInput");
  const dropdown = document.getElementById("dropdown");
  const clearBtn = document.getElementById("clearBtn");
  const arrowBtn = document.getElementById("arrowBtn");

  let selectedValue = null;
  let selectedLabel = "";
  let tempValue = ""; // 新增：临时保存选中项文字
  let dropdownVisible = false;

  function renderOptions(filter = "") {
    dropdown.innerHTML = "";
    const filtered = options.filter(o =>
      o.label.toLowerCase().includes(filter.toLowerCase())
    );
    filtered.forEach(option => {
      const div = document.createElement("div");
      div.textContent = option.label;
      div.addEventListener("click", () => {
        selectedValue = option.value;
        selectedLabel = option.label;
        input.value = selectedLabel;
        input.placeholder = "Select";
        dropdown.classList.remove("visible");
        dropdownVisible = false;
        input.readOnly = true;
        updateIcons();
      });
      dropdown.appendChild(div);
    });
  }

  function toggleDropdown() {
    dropdownVisible = !dropdownVisible;
    dropdown.classList.toggle("visible", dropdownVisible);

    if (dropdownVisible) {
      // 保存当前选中值，并清空输入框以便搜索
      tempValue = selectedLabel;
      input.value = "";
      input.placeholder = tempValue || "Select";
      input.readOnly = false;
      input.focus();
      renderOptions("");
    } else {
      input.readOnly = true;
      input.placeholder = "Select";
    }

    updateIcons();
  }

  function updateIcons() {
    const hovering = select.matches(':hover');
    const hasSelection = !!selectedValue;

    if (hasSelection && hovering) {
      clearBtn.classList.add("show");
      arrowBtn.classList.remove("show");
    } else {
      clearBtn.classList.remove("show");
      arrowBtn.classList.add("show");
      arrowBtn.textContent = dropdownVisible ? '^' : '›';
    }
  }

  input.addEventListener("click", () => {
    toggleDropdown();
  });

  input.addEventListener("input", () => {
    renderOptions(input.value);
  });

  clearBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    selectedValue = null;
    selectedLabel = "";
    input.value = "";
    input.readOnly = true;
    input.placeholder = "Select";
    clearBtn.classList.remove("show");
    dropdown.classList.remove("visible");
    dropdownVisible = false;
    updateIcons();
  });

  select.addEventListener("mouseenter", updateIcons);
  select.addEventListener("mouseleave", updateIcons);

  document.addEventListener("click", (e) => {
    if (!select.contains(e.target)) {
      if (dropdownVisible) {
        // 恢复旧值
        input.value = selectedLabel;
        input.placeholder = "Select";
        input.readOnly = true;
      }
      dropdownVisible = false;
      dropdown.classList.remove("visible");
      updateIcons();
    }
  });
</script>

</body>
</html>
